<template>
  <div class="areaInformation">
    <!-- 顶部Cards栏 -->
    <!-- 使用库区 -->
    <div class="useArea">
      <h2 class="useAreaTitle">已用库区
      </h2>
      <div class="empty" v-if="useList&&useList.length==0">
        暂无数据
      </div>
      <div class="useAreaContent">
        <div class="content" v-for="(item, index) in useList" :key="index"
          @click="item.enable_state !== '0' && openPopup(item)" :class="{'disabled': item.enable_state === '0'}">
          <div class=" title">
            {{ item.sto_area_name }}_{{ item.sto_area_code }}
          </div>
          <div class="img">
            <image-preview-black
              :src="item.pic_path"
              :width="'100%'"
              :height="'100%'"
            />
          </div>
          <div class="bottomContent">
            <div>使用货位:<span>
                {{ item.used_unit }} </span>
            </div>
            <div>空置货位:<span>
                {{ item.unused_unit }} </span>
            </div>
            <div>状态:
              <span>
                <el-tag size="mini"
                  :type="item.enable_state=='1'?'success':'danger'">{{item.enable_state=='1'?'已启用':'已停用'}}
                </el-tag>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 空置库区 -->
    <div class="vacancyArea" v-if="unUseList&&unUseList.length!=0">
      <h2 class="vacancyAreaTitle">空置库区</h2>
      <div class="vacancyAreaContent">
        <div class="content" v-for="(item,index) in unUseList" :key="index" @click="item.enable_state !== '0' && openPopup(item)" :class="{'disabled': item.enable_state === '0'}">
          <div class="title">
            {{ item.sto_area_name }}_{{ item.sto_area_code }}
          </div>
          <div class="img">
            <image-preview-black :src="item.pic_path" :width="'100%'" :height="'100%'"/>
          </div>
          <div class="bottomContent">
            <div>使用货位:<span>
                {{ item.used_unit }} </span>
            </div>
            <div>空置货位:<span>
                {{ item.unused_unit }} </span>
            </div>
            <div>状态:
              <span>
                <el-tag size="mini"
                  :type="item.enable_state=='1'?'success':'danger'">{{item.enable_state=='1'?'已启用':'已停用'}}
                </el-tag>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TopBar from "./topBar.vue";
  import ImagePreviewBlack from "@/components/ImagePreview/ImagePreviewBlack.vue";
  import {
    queryUnitByAreaId
  } from "@/api/index/yxl";
  export default {
    data() {
      return {
        CargoArea: [],
        FreightData: [],
      }
    },
    components: {
      TopBar,
      ImagePreviewBlack
    },
    methods: {
      openPopup(item) {
        const form = {
          stoId: item.sto_id,
          stoAreaId: item.sto_area_id,
        };
        queryUnitByAreaId(form).then(response => {
          this.$router.push({
            path: '/index/location',
            query: {
              FreightData: JSON.stringify(response.data),
            }
          });
        });
      },
    },
    computed: {
      useList() {
        return this.CargoArea.filter(item => item.enable_state > 0)
      },
      unUseList() {
        return this.CargoArea.filter(item => item.enable_state == 0)
      }
    },
    watch: {
      '$route.query': {
        immediate: true,
        handler(query) {
          if (query.CargoArea) {
            this.CargoArea = JSON.parse(query.CargoArea);
          }
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .areaInformation {
    padding: 15px 0px 15px 15px;
  }

  //禁用
  .disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .vacancyArea {
    margin-top: 30px;
  }

  .useArea,
  .vacancyArea {
    padding: 0 20px 15px 20px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
  }

  .useAreaTitle:before,
  .vacancyAreaTitle:before {
    content: "";
    background: #0362fa;
    display: inline-block;
    width: 6px;
    height: 20px;
    margin-right: 10px;
  }

  .useAreaContent,
  .vacancyAreaContent {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .content {
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    width: calc(20% - 24px);
    height: 185px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
  }

  .img {
    height: 105px;
    width: 100%;
    margin-bottom: 5px;
  }

  .bottomContent {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666666;
  }

  .title {
    font-size: 20px;
    margin-bottom: 5px;
    color: #333333;
    display: flex;
    justify-content: space-between;
  }

  .empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  /* 设置根字体大小：基础大小为16px */
  html {
    font-size: 16px;
    /* 默认字体大小为16px，相当于1rem = 16px */
  }

  /* 默认全局字体大小 */
  body {
    font-size: 1rem;
  }

  /* 响应式设计：当屏幕宽度小于1200px时，每行显示4个卡片 */
  @media (max-width: 1500px) {
    .content {
      flex: 0 1 calc(25% - 24px);
      /* 每行显示 4 个卡片 */
    }

    .bottomContent {
      font-size: 0.875rem !important;
    }
  }

  /* 响应式设计：当屏幕宽度小于900px时，每行显示3个卡片 */
  @media (max-width: 1200px) {
    .content {
      flex: 0 1 calc(33.33% - 24px);
      /* 每行显示 3 个卡片 */
    }

    .bottomContent {
      font-size: 0.75rem !important;
    }
  }

  /* 响应式设计：当屏幕宽度小于750px时，每行显示2个卡片 */
  @media (max-width: 900px) {
    .content {
      flex: 0 1 calc(50% - 24px);
      /* 每行显示 2 个卡片 */
    }

    .bottomContent {
      font-size: 0.75rem !important;
    }
  }

  /* 响应式设计：当屏幕宽度小于600px时，每行显示1个卡片 */
  @media (max-width: 600px) {
    .content {
      flex: 0 1 100%;
      /* 每行显示 1 个卡片 */
    }

    .bottomContent {
      font-size: 0.75rem !important;
    }
  }

  /* 鼠标悬停时放大效果 */
  .content:hover {
    transform: scale(1.05);
  }
</style>
